<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="manager/css/font.css">
    <link rel="stylesheet" href="manager/css/xadmin.css">
    <script type="text/javascript" src="manager/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="manager/js/xadmin.js"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.bootcss.com/jquery.form/3.51/jquery.form.js"></script>
      <!-- include libraries(jQuery, bootstrap) -->
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
      <style>
          select{
              width: 200px;
              height: 38px;
              display: block;
          }
      </style>
      <!-- include summernote css/js -->
      <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
      <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <select id="ppc">
            <option selected value="0">--请选择产品大类别--</option>
            <option th:each="productCategory:${productCategorys}" th:selected="${productCategory.pc_id==product.ppc_id}"  th:text="${productCategory.pc_name}" th:value="${productCategory.pc_id}"></option>
        </select>
        <select id="pc">
        </select>
        <form id="upsdsa" class="layui-form" method="post" enctype="multipart/form-data">
            <input type="hidden" name="p_id"  th:value="${product.p_id}">
            <input type="hidden" name="ppc_id"  th:value="${product.ppc_id}">
            <input type="hidden" name="pc_id"   th:value="${product.pc_id}" >
          <div class="layui-form-item">
                <div class="layui-input-inline">
                    产品名称:<input type="text" id="user" name="p_name" th:value="${product.p_name}" required="" autocomplete="off" class="layui-input" lay-verify="nikename">
                </div>
          </div>
            <div class="layui-form-item">
                    产品封面:
                <input id="myfiles" onchange="loadImg(event)" type="file" name="myfile" />
                <img style="width: 100px;width: 100px;" id="imgs" th:src="${product.p_image}">
            </div>
            <input type="hidden" name="descc" value="${product.p_desc}"/>
            <input type="hidden" name="trait" value="${product.p_trait}" />
            <span class="x-red">*</span>产品描述
            <br>
            <div id="summernote"></div>
            <br>
            <span class="x-red">*</span>产品特点
            <br>
            <div id="summernote2"></div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="add" lay-submit="">
                    修改
                </button>
            </div>
      </form>
    </div>
    <script>
        function loadImg(e){
            console.info(e.target.files[0]);//图片文件
            console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
            var reader = new FileReader();
            reader.onload = (function (file) {
                return function (e) {
                    console.info(this.result); //这个就是base64的数据了
                    document.getElementById("imgs").src = this.result;
                };
            })(e.target.files[0]);
            reader.readAsDataURL(e.target.files[0]);
        }
        pc('[[${product.ppc_id}]]')
        function pc(id){
            var pc_id = $("input[name='pc_id']").val();
            $.ajax({
                url:"productMin",
                data:{"ppc_id":id},
                method:"post",
                success:function (res) {
                    if (res.length>0){
                        $("#pc").append("<option "+(pc_id==0?'selected':'')+" value='0'>--请选择产品小类别--</option>")
                        for (var i = 0; i < res.length; i++){
                            $("#pc").append("<option "+(pc_id==res[i].pc_id?'selected':'')+" value='"+res[i].pc_id+"'>"+res[i].pc_name+"</option>")
                        }
                    }
                },
                dataType:"json"
            })
        }
        $("#ppc").change(function () {
            $("#pc").html("")
            $("input[name='pc_id']").val("0")
            $("input[name='ppc_id']").val($("#ppc").val())
            if($("#ppc").val()!='0'){
                pc($("#ppc").val())
            }
        })
        $("#pc").change(function () {
            $("input[name='pc_id']").val($("#pc").val())
        })

        $(document).ready(function() {
            $('#summernote').summernote({
                placeholder: 'Hello bootstrap 4',
                tabsize: 2,
                height: 100
            });
            $("div[class='note-editable']").eq(0).load("[[${product.p_desc}]]")
            $("input[name='descc']").val($('#summernote').summernote('code'))
            $('#summernote2').summernote({
                placeholder: 'Hello bootstrap 4',
                tabsize: 2,
                height: 100
            });
            $("div[class='note-editable']").eq(1).load("[[${product.p_trait}]]")
            $("input[name='trait']").val($('#summernote2').summernote('code'))
        });
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 1){
                return '不能有空的';
              }
              console.info("111")
            }
          });

          //监听提交
          form.on('submit(add)', function(data){
                console.info( $('#summernote').summernote('code'));
                if($("input[name='ppc_id']").val()=="0"){
                    alert("请选择大类型")
                }else if($("input[name='pc_id']").val()=="0"){
                    alert("请选择小类型")
                }else{
                    if($("input[name='descc']").val()!=$('#summernote').summernote('code')){
                        $("input[name='descc']").val($('#summernote').summernote('code'))
                    }
                    if($("input[name='trait']").val()!=$('#summernote2').summernote('code')){
                        $("input[name='trait']").val($('#summernote2').summernote('code'))
                    }
                    $("#upsdsa").ajaxSubmit({
                        url:"updProduct",
                        type:"post",
                        success:function (result) {
                            if(result.result=="0000"){
                                layer.alert("修改成功", {icon: 6},function () {
                                    // 获得frame索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    window.parent.location.reload()
                                    //关闭当前frame
                                    parent.layer.close(index);
                                });
                            }else{
                                layer.msg(result.resultMsg,{icon:1,time:1000});
                            }
                        },
                        dataType:"json"
                    })
                }
              return false;
          });
        });
    </script>
  </body>

</html>